<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition template="../template.xhtml">
	<ui:define name="content">
		<h:outputStylesheet library="css" name="richfaces.css" />
		<h1>Orders</h1>
		<h:form>
			<div>
				<h:commandLink value="New Order"
					action="#{ordersBean.editOrder}">
					<f:setPropertyActionListener
						target="#{ordersEditorBean.order}" value="#{null}" />
				</h:commandLink>
			</div>
			<rich:dataTable value="#{ordersBean.orders}" var="order"
				iterationStatusVar="it" id="tableOrders"
				rowClasses="odd-row, even-row" styleClass="stable"
				rows="#{ordersBean.recordsPerPage}">

				<!-- Telo tabulky -->
				<rich:column sortBy="#{order.name}" id="name"
					sortOrder="#{ordersSortingBean.nameOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Name" render="tableOrders"
							action="#{ordersSortingBean.sortByName}" />
					</f:facet>
					<rich:collapsibleSubTableToggler for="sbtbl"  />
					<h:outputText value="#{order.name}" />
				</rich:column>
				<rich:column sortBy="#{order.incomeDate}" id="incomeDate"
					sortOrder="#{ordersSortingBean.incomeDateOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Income Date" render="tableOrders"
							action="#{ordersSortingBean.sortByIncomeDate}" />
					</f:facet>
					<h:outputText value="#{order.incomeDate}">
						<f:convertDateTime  pattern="dd-MM-yyyy" timeZone="GMT+3" />
					</h:outputText>
				</rich:column>
				<rich:column sortBy="#{order.subscriber.name}" id="subscriber"
					sortOrder="#{ordersSortingBean.subscriberOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Subscriber" render="tableOrders"
							action="#{ordersSortingBean.sortBySubscriber}" />
					</f:facet>
					<h:outputText value="#{order.subscriber.name}" />
				</rich:column>
				<rich:column id="itemsCount">
					<f:facet name="header">
						<h:outputText value="Items Count" />
					</f:facet>
					<h:outputText value="#{ordersBean.getOrderedItemsCount(order)}" /> ks.
				</rich:column>
				<rich:column id="amountSum">
					<f:facet name="header">
						<h:outputText value="Amount" />
					</f:facet>
					<h:outputText value="#{ordersBean.getOrderedItemsAmountSum(order)}" >
						<f:convertNumber pattern="#0" />
					</h:outputText>
					 Kg
				</rich:column>
				<rich:column id="priceSum">
					<f:facet name="header">
						<h:outputText value="Price" />
					</f:facet>
					<h:outputText value="#{ordersBean.getOrderedItemsPriceSum(order)}">
						<f:convertNumber pattern="#0.00" />
					</h:outputText> Kč
				</rich:column>
				
				<rich:column>
					<!-- Linka na Upravu zaznamu -->
					<h:commandLink value="Edit" action="#{ordersBean.editOrder}">
						<f:setPropertyActionListener target="#{ordersEditorBean.order}"
							value="#{order}" />
					</h:commandLink>
					<!-- Linka na Vymazanie zaznamu -->
					<a4j:commandLink execute="@this" render="confirmPane"
						oncomplete="#{rich:component('confirmPane')}.show()"
						value="Delete">
						<f:setPropertyActionListener
							target="#{ordersConfirmDeleteDialogBean.order}"
							value="#{order}" />
					</a4j:commandLink>
					<!-- Linka na Pridanie objednaneho prvku -->
					<h:commandLink value="Add item" action="#{ordersBean.addItem}">
						<f:setPropertyActionListener target="#{ordersAddItemBean.order}"
							value="#{order}" />
					</h:commandLink>
				</rich:column>

				<rich:collapsibleSubTable id="sbtbl" expanded="true"
									var="item" value="#{ordersBean.getOrderedItems(order)}">
					<rich:column colspan="3">
						<h:outputText value="#{item.stockType.name} (#{item.stockType.productClass}. class)" />
					</rich:column>
					<rich:column >
						<h:outputText value="#{item.stockType.price}">
							<f:convertNumber pattern="#0.00" />
						</h:outputText> Kč/kg
					</rich:column>
					<rich:column >
						<h:outputText value="#{item.ammount}">
							<f:convertNumber pattern="#0" />
						</h:outputText> Kg
					</rich:column>
					<rich:column >
						<h:outputText value="#{item.stockType.price*item.ammount}">
							<f:convertNumber pattern="#0.00" />
						</h:outputText> Kč
					</rich:column>
					<rich:column>
					<h:commandLink value="Remove Item" action="#{ordersBean.deleteOrderedItem(item)}">
					</h:commandLink>
				</rich:column>
					
				</rich:collapsibleSubTable>
				<f:facet name="footer">
					<rich:dataScroller page="#{ordersBean.page}" />
				</f:facet>
			</rich:dataTable>

			<!-- JQuery na stylizaciu tabulky -->
			<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
			<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
			<rich:jQuery selector=".stable tr" event="mouseover"
				query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout"
				query="jQuery(this).removeClass('active-row')" />

			<!-- Potvrdzovaci dialog vymazania dodavatela -->
			<rich:popupPanel id="confirmPane"
				header="#{ordersConfirmDeleteDialogBean.title}" autosized="true">
				<h:outputText value="#{ordersConfirmDeleteDialogBean.question}" />
				<br />
				<a4j:commandButton value="Yes"
					action="#{ordersConfirmDeleteDialogBean.submit}"
					render="tableOrders" execute="confirmPane"
					oncomplete="#{rich:component('confirmPane')}.hide();" />
				<a4j:commandButton value="No"
					onclick="#{rich:component('confirmPane')}.hide(); return false;" />
			</rich:popupPanel>
		</h:form>
	</ui:define>
</ui:composition>
</html>